<!-- 商品分类 -->
<template>
  <div>
       <!-- 面包屑部分 -->
      <el-breadcrumb separator="/" class="header">
            <el-breadcrumb-item >首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
       </el-breadcrumb>


      <el-card>
      <!-- 添加分类 -->
     <el-button type="success" @click="addgood">添加分类</el-button>

      <!-- 商品表格 -->
      <ElTree 
      :data="goods" 
      :columns="columns"
      :selection-type="false"
      :expand-type="false"
      show-index
      index-text="id">
        <!-- 引入操作 -->
        <template slot="opt" slot-scope="scope" >
            <el-button type="primary" icon="el-icon-edit" circle @click="putclick(scope.row)"></el-button>
            <el-button type="danger"   icon="el-icon-delete" circle @click="deletegood(scope.row)"></el-button>
        </template>
      </ElTree>
       

      <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[2,4]"
        :page-size="2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
   </el-card>

 <!-- 添加分类 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
        <el-form ref="form" :model="addgoods" label-width="80px">
          <el-form-item label="商品名称">
            <el-input v-model="addgoods.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="商品属性">
          <el-cascader
            v-model="value"
            :options="options"
            :props="defaultprop"
            @change="handleChange"
           >
            </el-cascader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onsubmit">确 定</el-button>
        </span>
      </el-dialog>

  <!-- 编辑分类-->
      <el-dialog
        title="修改商品信息"
        :visible.sync="putdialogVisible"
        width="50%"
        :before-close="handleClose">
        <el-form ref="form" label-width="80px">
          <el-form-item label="商品名称">
            <el-input v-model="cat_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="putdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onsubmit1">确 定</el-button>
        </span>
      </el-dialog>


  </div>
</template>

<script>
import {categories,addcategories,deletecategories,putcategories} from "network/goodclassify.js"
import {getcategories} from  "network/goodlist.js"
// 引入element-tree-grid
import ElTree from'vue-table-with-tree-grid'
export default {
 name:"goodclassify",
 components: {
    ElTree
  },
 created () {
    //获取商品信息
   this.categories()
        // 请求商品分类的数据
    getcategories().then(res=>{
       this.options=res.data.data
    })
    
 },
 data () {
   return {
    //  商品获取参数
      type:"",
      // 页码
      pagenum:1,
      //每行显示得个数 
      pagesize:6,
      goods:[],
      total:0,
      // 配置表格列
      columns:[
        {
          label:"分类名称",
          prop:"cat_name",
          width:"150px"
        },
        {
          label:"级别",
          prop:"cat_level",
          width:"100px"
        },
         {
          label:"是否有效",
          prop:"cat_deleted"
        },
        //定义一个模板
        {
          label:"操作",
          type:"template",
          template:"opt"
        }
      ],
      dialogVisible:false,
      addgoods:{
         cat_pid:"",
         cat_level: "",
         cat_name:""
      },
      //级联下拉框值
      options:[],
      defaultprop:{
          label:"cat_name",
          value:"cat_id",
          children:"children",
          expandTrigger: 'hover',
          checkStrictly : true
        },
        value:[],
        // 编辑分类
        putdialogVisible:false,
        cat_name:"",
        cat_id:0,
        cat_deleted:false

   }
 },

 methods: {
      //获取商品信息
      categories(){
         categories(this.query,this.pagenum,this.pagesize).then(res=>{
            console.log(res)
            this.goods=res.data.data.result
            this.total=res.data.data.total
            this.goods.filter(item=>{
                   return  item.cat_deleted="有效"
          })
      })
      },

      handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })  
            .catch(_ => {});
      },

     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.pagenum=val
        this.categories()
      },

      // 添加分类
      addgood(){
          this.dialogVisible=true
      },
      handleChange(value){
          console.log(this.value)
      },
      onsubmit(){
        // value.length=0 添加第一项
        if(this.value.length==0){
            this.addgoods.cat_level=0
            this.addgoods.cat_pid=0
             // value.length=0 添加第二项
        }else if(this.value.length==1){
            this.addgoods.cat_level=1
            this.addgoods.cat_pid=this.value[0]
              // value.length=0 添加第三项
        }else if(this.value.length==2){
            this.addgoods.cat_level=2
            this.addgoods.cat_pid=this.value[1]
        }
          //发送网络请求
          addcategories(this.addgoods).then(res=>{
            console.log(res)  
            this.categories()
          })
          this.dialogVisible=false
      },

      // 删除商品
      deletegood(goodsrow){
         deletecategories(goodsrow.cat_id).then(res=>{
           console.log(res)
           this.categories()
         })
      },
      // 编辑商品信息
      putclick(goodsrow){
         this.cat_id=goodsrow.cat_id
         this.putdialogVisible=true
         this.cat_deleted=true
      },
      onsubmit1(){
         putcategories(this.cat_id,this.cat_name).then(res=>{
            console.log(res)
         })
         this.putdialogVisible=false
      }

 }
}

</script>
<style scoped>
.header{
  margin-bottom: 20px;
}
</style>